<template>
    <div>
        <h2>基本设置</h2>
        <Form ref="form" :model="setInfo" :rules="rules" label-position="top" class="ivu-mt">
            <Row type="flex" :gutter="48">
                <Col v-bind="grid1">
                <FormItem label="头像" prop="avatar">
                    <Avatar :src="setInfo.head_img_url ? setInfo.head_img_url : baseImg"
                        class="setting-account-info-avatar" shape="square" />
                    <Upload ref="upload" :on-success="successUpload" :action="requestAction"
                        :show-upload-list="false" :data="datas" name="file" :format="['jpg','jpeg','png']"
                        class="ivu-mt ivu-mb">
                        <Button icon="md-camera">修改头像</Button>
                    </Upload>
                </FormItem>
                </Col>
                <Col v-bind="grid2">
                <FormItem label="姓名" prop="realname">
                    <Input v-model="setInfo.realname" placeholder="请输入姓名" />
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input v-model="setInfo.mobile" placeholder="请输入手机号" />
                </FormItem>
                <FormItem label="性别">
                    <RadioGroup v-model="setInfo.gender">
                        <Radio :label="1">男</Radio>
                        <Radio :label="2">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="所属项目">
                    <Select v-model="setInfo.project_name" disabled multiple :max-tag-count="3" placeholder="请选择项目">
                        <Option v-for="(item,index) in project_name" :disabled="true" :value="item.value" :key="index">
                            {{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">更新基本信息</Button>
                </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import { rbacmemberselfinfo, rbacmembereditinfo } from '@/api/jzy'
    import settings from '@/setting'
    import util from '@/libs/util'
    import { mapState, mapActions } from 'vuex';
    export default {
        data () {
            return {
                baseUrl: settings.request.apiBaseURL,
                requestAction:'',
                token: util.cookies.get('token'),
                grid1: {
                    xl: {
                        span: 12,
                        order: 2
                    },
                    lg: {
                        span: 24,
                        order: 1
                    },
                    md: {
                        span: 24,
                        order: 1
                    },
                    sm: {
                        span: 24,
                        order: 1
                    },
                    xs: {
                        span: 24,
                        order: 1
                    }
                },
                datas: { type: 'member' },
                loading: false,
                project_name: [],
                baseImg: require('@/assets/images/default.jpg'),
                grid2: {
                    xl: {
                        span: 12,
                        order: 1
                    },
                    lg: {
                        span: 24,
                        order: 2
                    },
                    md: {
                        span: 24,
                        order: 2
                    },
                    sm: {
                        span: 24,
                        order: 2
                    },
                    xs: {
                        span: 24,
                        order: 2
                    }
                },
                rules: {
                    realname: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { message: '请填写正确的手机号', pattern: /^1[3456789]\d{9}$/, trigger: 'blur' }
                    ]
                },
                host: '',
                setInfo: {}
            }
        },
        props: {
        },
        computed: {
            ...mapState('admin/user', [
                'info'
            ])
        },
        methods: {
            ...mapActions('admin/user', ['set']),
            initial () {
                // console.log(this.info, 'info')
                this.askData()
            },
            askData () {
                rbacmemberselfinfo().then(res => {
                    this.setInfo = res
                    for (let item of res.project_name) {
                        this.project_name.push({ value: item, label: item })
                    }
                })
            },
            // 上传文件
            successUpload (response, file, fileList) {
                this.setInfo.head_img_url = `${response.data.host}${response.data.image_url[0]}`
                this.setInfo.head_portrait = response.data.image_url[0]
            },
            handleSubmit () {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let formData = {
                            name: this.setInfo.realname,
                            mobile: this.setInfo.mobile,
                            gender: this.setInfo.gender,
                            head_portrait: this.setInfo.head_portrait || ''
                        }
                        rbacmembereditinfo(formData).then(() => {
                            this.info.head_img_url = this.setInfo.head_img_url
                            this.set(this.info)
                            this.$Message.success('信息更新成功!')
                        })
                    }
                });
            }
        },
        mounted () {
            this.initial()
            this.requestAction =
            this.baseUrl +
            `/v1/upload/images?auth_access_token=${util.cookies.get(
                "token"
            )}&auth_project_id=${localStorage.getItem('currentProject')}`
        }
    }
</script>
<style lang="less">
    .setting-account-info {
        &-avatar {
            width: 90px;
            height: 90px;
        }
    }
</style>
